import React, { Component } from "react";
import { Link } from "react-router-dom";
import "sass/yanjiubaogao.scss";
import "sass/tupu.scss";
import DownloadAlert from "components/stands/DownloadAlert";
import Crumbs from "components/stands/Crumbs";
import TupuFigureNewsList from "components/stands/TupuFigureNewsList";
import { Connect } from "hoc/Connect";
import { b6De } from 'utils/base.js';
import http from "service/members";
import moment from "moment";
import Cookies from "js-cookie";
import { Modal } from 'antd';
import MyBackTop from "components/MyBackTop";
class YanJiuBaoGaoDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      MaskStatus: false,
      crumbsData: [
        {
          path: "/stands/yanjiubaogao",
          value: "研究报告"
        },
        {
          path: "/stands/yanjiubaogaoList/2/0",
          value: "一张图看懂系列报告列表"
        },
        {
          path: "",
          value: "详情"
        }
      ],
      reportType: ['完整版', '简版'],
      tabStatus:1,
      nowClick: 0
    };
  }
  componentDidMount () {
    window.scrollTo(0, 0);
    this.props.getBaoGaoDetail(
      {
        reportId: this.props.match.params.id,
        reportType: this.props.match.params.reportType,
      }
    )
    this.checkTypeList(this.props.match.params.reportType)
    this.props.getHotBaoGaoInfo(this.props.match.params.reportType)
  }

  componentWillUnmount () {
  }

  checkTypeList (type) {
    var crubsDefalt = [
      {
        path: "/stands/yanjiubaogao",
        value: "研究报告"
      },
      {
        path: `/stands/yanjiubaogaoList/${type}/0`,
        value: type == 1 ? "精品专题报告" : '一张图看懂系列报告列表'
      },
      {
        path: "",
        value: "详情"
      }
    ]
    this.setState({ crumbsData: crubsDefalt });
  }
  showMask = async (e,type) => {
    let cook = Cookies.get("useInfo");
    if (!cook) {
      window.location.href = '#/user/login'
      return
    }
    let obj = b6De(cook);
    let memberInfo = await http.getMemberInfo({
      userId: obj.userId
    })
    if (!memberInfo.list) {
      Modal.warning({
        content: '成为应急网会员即可享受行业智库免费资讯内容',
        onOk () {
          window.location.href = '#/userInfo/myManage'
        },
      });
    }else{
      if (type) {
        http.imageDownload({
          id: this.props.match.params.id,
          type: 2
        })
        this.state.nowClick++
      }
      
      this.setState({ MaskStatus: !this.state.MaskStatus });
    }
  }
  toggleStatus (val) {
    this.setState({
      tabStatus: val
    })
  }
  render () {
    let { crumbsData, reportType, tabStatus, nowClick} = this.state
    let { baoGaoDetail, HotBaoGao, match} = this.props
    return (
      <div className="wrapper">
        <Crumbs crumbsData={crumbsData}></Crumbs>
        <div className="clearfix">
          <div className="module-section">
            {
              match.params.reportType == 1 && (<div className="tupu-figure-intro best-info">
              <div className="figure">
                <img src={`${baoGaoDetail.reportPath}?time=${Date.parse(new Date())}`} alt="" />
              </div>
              <h3>{baoGaoDetail.reportTitle}</h3>
              <div className="about-info">
                  <p>所属行业：{baoGaoDetail.reportIndustryCategory}</p>
                  <p>页码：{baoGaoDetail.reportPage}</p>
                  <p>时间：{moment(baoGaoDetail.reportShelfTime).format('YYYY/MM/DD')}</p>
                  <p>浏览量：{(baoGaoDetail.reportClick || 0) + nowClick}</p>
                  <p>服务形式：{baoGaoDetail.serviceForm}</p>
                  <p>客户服务专线：0755-82554327</p>
                  <p>价格：{baoGaoDetail.reportPrice || 0}</p>
              </div>
              <div className="tools">
                <span className="button" onClick={this.showMask.bind(this,1)}>下载</span>
              </div>
            </div>)
            }
            {
              match.params.reportType != 1 && (<div className="tupu-figure-intro">
                <div className="figure">
                  <img src={`${baoGaoDetail.reportPath}?time=${Date.parse(new Date())}`} alt="" />
                </div>
                <h3>{baoGaoDetail.reportTitle}</h3>
                <div className="about-info">
                  <span>所属行业：{baoGaoDetail.reportIndustryCategory}</span>
                  <span>时间：{moment(baoGaoDetail.reportShelfTime).format('YYYY/MM/DD')}</span>
                  <span>类型：{reportType[baoGaoDetail.reportType]}</span>
                  <span>下载量：{(baoGaoDetail.reportClick || 0) + nowClick}</span>
                </div>
                <div className="tools">
                  <span className="button" onClick={this.showMask.bind(this, 1)}>下载</span>
                </div>
              </div>)
            }
            {/* 详情 */}
            <div className="detail">
              <div className="tabs">
                <span className={tabStatus == 1 ? 'current' : null} onClick={this.toggleStatus.bind(this, 1)}>{match.params.reportType == 1 ? '内容简介' : '一张图研报介绍'}</span>
                {
                  match.params.reportType == 1 && (<span className={tabStatus == 2 ? 'current' : null} onClick={this.toggleStatus.bind(this, 2)}>报告目录</span>)
                }
                
              </div>
              <div className="contents">
                <div dangerouslySetInnerHTML={{ __html: tabStatus == 1 ? baoGaoDetail.introduction : baoGaoDetail.catalogue }} />
              </div>
            </div>
          </div>
          <div className="module-side">
            <div className="model">
              <div className="header">
                <h3>{match.params.reportType == 1 ? '热门专题报告' :'热门一张图研报'}</h3>
              </div>
              <ul className="tupu-figure-news-list">
                {
                  !!HotBaoGao.length && HotBaoGao.map((item, index) => {
                    return (
                      <TupuFigureNewsList ItemInfo={item} key={`id_${index}`} linkUrl={`/stands/yanjiubaogaoDetail/${match.params.reportType}}`} />
                    )
                  })
                }
              </ul>
            </div>
            <div className="ad-box">
              <a href="/">
                <img src={`https://yjw-image.oss-cn-shenzhen.aliyuncs.com/yjwSit/20200304-%E5%90%88%E6%88%90%E5%88%87%E6%8D%A2%E5%9B%BE333-rc-upload-1582854164061-170.gif?time=${Date.parse(new Date())}`} alt="" width="300" height="250" />
              </a>
            </div>
          </div>
        </div>
        {
          this.state.MaskStatus && (<DownloadAlert showMask={this.showMask} />)
        }
        <MyBackTop />
      </div>
    );
  }
}
export default Connect({
  name: 'yanjiubaogaoStore',
  need: [],
  func: ['getBaoGaoDetail','getHotBaoGaoInfo'],
}, YanJiuBaoGaoDetail);